<{include file="Public/top_wzq.html" }>
<style>
.validDL {
	white-space: nowrap;
}
.shorterInput {
	width: 124px !important;
}
</style>
<script>

require(["jquery","knockout","../xy-utils",'jquery.ajaxfileupload'],function($,ko,xyUtils){

	$(function(){
		function viewModel(){
      var self = this;
      this.addReplyContentProperty = function(ary)
      {
        var len = ary.length, elem;
        for(var i=0;i<len;i++)
        {
          ary[i].replyContent = ko.observable("");
          ary[i].replyContainerShow = ko.observable(false);
        }
      };

      //每个自动回复数据都包含以下几个字段
      //mKeyword:关键字
      //mValidFrom:有效期起始日期
      //mValidTo:有效期终止日期
      //mTitle:回复标题【仅当回复类型为'图片'时有效】
      //mDes:回复正文
      //mLink:跳转地址
      //mReceiveCount:可接收次数
      //mReplyType:回复类型
      //mQRCodeTarget:面向人群(0:全部新关注用户，1:特定二维码扫描关注用户)【仅当‘接收类型’为‘事件’时有效】
      //mTicketTarget:可领取用户（0：全部用户，1：特定用户）【仅当回复类型为'卡券'时有效】
      //mBindPhoneNum:可领取用户类型为‘特定用户’时该字段用以记录特定用户的手机号码，手机号之间以逗号分隔【仅当回复类型为'卡券'时有效】
      //mTicket:卡券ID【仅当回复类型为'卡券'时有效】
      //mTicketValidType:卡券有效期类型（0：固定日期，1：领取后一定时间内）【仅当回复类型为'卡券'时有效】
      //mTicketValidFrom:卡券有效期起始日期【仅当回复类型为'卡券'时且卡券有效期类型为‘固定日期’时有效】
      //mTicketValidTo:卡券有效期终止日期【仅当回复类型为'卡券'时且卡券有效期类型为‘固定日期’时有效】
      //mTicketAvailableFrom:卡券自领取后几天内开始起效【仅当回复类型为'卡券'时且卡券有效期类型为‘领取后一定时间内’时有效】
      //mTicketAvailableTo:卡券自起效后几天内有效【仅当回复类型为'卡券'时且卡券有效期类型为‘领取后一定时间内’时有效】
      //mTicketCount:卡券库存【仅当回复类型为'卡券'时有效】
      //mQRCodeSource:二维码字符串【仅当卡券‘面向人群’为‘特定二维码扫描关注用户’时起效】
      //mReplyImg:回复图片地址【仅当回复类型为'图片'时有效】
          var autoReplyListAry = [
      <{foreach from=$list item=item}>
         <{if $item['module'] eq 'basic'}>
              {mID:<{$item.id}>,mKeyword:"<{$item.content}>",mValidFrom:"<{if $item.beginTime>0}><{'Y-m-d'|date:$item.beginTime}><{/if}>",mValidTo:"<{if $item.endTime>0}><{'Y-m-d'|date:$item.endTime}><{/if}>",mTitle:"<{$item.title}>",mDes:"<{$item.sub.content}>",mReplyType:"<{$item.module}>"},
         <{else if $item['module'] eq 'news'}>
            {mID:<{$item.id}>,mKeyword:"<{$item.content}>",mValidFrom:"<{if $item.beginTime>0}><{'Y-m-d'|date:$item.beginTime}><{/if}>",mValidTo:"<{if $item.endTime>0}><{'Y-m-d'|date:$item.endTime}><{/if}>",mTitle:"<{$item.title}>",mLink:"<{$item.sub.url}>",mReplyType:"<{$item.module}>",mReplyTitle:"<{$item.sub.title}>",mReplyImg:"<{$item.sub.thumb}>"},
         <{/if}>
      <{/foreach}>
         //     {mID:1,mKeyword:"事件图片",mValidFrom:"2016-04-29",mValidTo:"2016-05-29",mTitle:"接收类型为事件回复类型为图片",mDes:"呼呼呼呼哈哈哈哈",mLink:"http://www.baidu.com",mReceiveCount:"10",mReplyType:"news",mReplyTitle:"basic", mQRCodeTarget:"0",mTicketTarget:"0", mBindPhoneNum:"",mTicket:"", mTicketValidType:"0",mTicketValidFrom:"", mTicketValidTo:"",mTicketAvailableFrom:"", mTicketAvailableTo:"",mTicketCount:"", mQRCodeSource:"",mReplyImg:"http://img2.imgtn.bdimg.com/it/u=2025421417,3030061049&fm=206&gp=0.jpg"},
         //     {mID:2,mKeyword:"文本卡券",mValidFrom:"2016-05-29",mValidTo:"2016-06-29",mTitle:"接收类型为文本回复类型为卡券",mDes:"呼呼呼呼哈哈哈哈",mLink:"http://www.baidu.com",mReceiveCount:"10",mReplyType:"card",mReplyTitle:"basic", mQRCodeTarget:"0",mTicketTarget:"1", mBindPhoneNum:"13688888888",mTicket:"", mTicketValidType:"0",mTicketValidFrom:"2016-03-29", mTicketValidTo:"2016-04-29",mTicketAvailableFrom:"", mTicketAvailableTo:"",mTicketCount:"100", mQRCodeSource:"",mReplyImg:""}
          ];
          this.autoReplyListData = ko.observableArray(autoReplyListAry);
			
      //该对象用来保存当前编辑条目
      this.editingReply = {
      mID:ko.observable(),
      mKeyword:ko.observable(),
      mValidFrom:ko.observable(), mValidTo:ko.observable(), 
      mTitle:ko.observable(), mDes:ko.observable(), 
      mLink:ko.observable(),mReceiveCount:ko.observable(),
      mReplyTitle:ko.observable(),
      mReplyType:ko.observable(), mQRCodeTarget:ko.observable(),
      mTicketTarget:ko.observable(), mBindPhoneNum:ko.observable(),
      mTicket:ko.observable(), mTicketValidType:ko.observable(),
      mTicketValidFrom:ko.observable(), mTicketValidTo:ko.observable(),
      mTicketAvailableFrom:ko.observable(), mTicketAvailableTo:ko.observable(),
      mTicketCount:ko.observable(), mQRCodeSource:ko.observable(),
      mReplyImg:ko.observable(), 
      cancelable:ko.observable()//该字段用来标示是否是新建的条目，若为false则为新建条目，否则为编辑已存在条目
      };

      //当标签页切换时执行该回调
      this.onNavChange = function(i){
        if(i === 1)//当标签页切换到“新增回复”时将当前编辑数据设置为初始状态
        {
          var e = self.editingReply;
          e.mID('0');
          e.mKeyword("");
          e.mValidFrom(""); e.mValidTo("");
          e.mTitle(""); e.mDes("");
          e.mLink(""); e.mReceiveCount("");
          e.mReplyType("0"); e.mQRCodeTarget("0");
          e.mTicketTarget("0"); e.mBindPhoneNum("");
          e.mTicket(""); e.mTicketValidType("0");
          e.mTicketValidFrom(""); e.mTicketValidTo("");
          e.mTicketAvailableFrom("0"); e.mTicketAvailableTo("30");
          e.mTicketCount("0"); e.mQRCodeSource("");
          e.mReplyImg(""); e.cancelable(false);
        }
      };

      //当修改已存在项目时执行该回调
      this.onEditBtnClick = function(d,e){
        xyUtils.changeViewStack(1);
        var e = self.editingReply;
        e.mID(d.mID);
        e.mKeyword(d.mKeyword);
        e.mValidFrom(d.mValidFrom); e.mValidTo(d.mValidTo);
        e.mTitle(d.mTitle); e.mDes(d.mDes);
        e.mLink(d.mLink); e.mReceiveCount(d.mReceiveCount);
        e.mReplyType(d.mReplyType); e.mQRCodeTarget(d.mQRCodeTarget);
        e.mReplyTitle(d.mReplyTitle);
        e.mTicketTarget(d.mTicketTarget); e.mBindPhoneNum(d.mBindPhoneNum);
        e.mTicket(d.mTicket); e.mTicketValidType(d.mTicketValidType);
        e.mTicketValidFrom(d.mTicketValidFrom); e.mTicketValidTo(d.mTicketValidTo);
        e.mTicketAvailableFrom(d.mTicketAvailableFrom); e.mTicketAvailableTo(d.mTicketAvailableTo);
        e.mTicketCount(d.mTicketCount); e.mQRCodeSource(d.mQRCodeSource);
        e.mReplyImg(d.mReplyImg); e.cancelable(true);
      };

      this.onDeleteBtnClick = function(d,e){
        if(!confirm("确定删除么")){return false};
        var $data="id="+ d.mID;
        $.post("<{u('deleteRule')}>",$data,function(re) {
          //从d中取出某个关键字段作为参数发送ajax请求至后端，待数据返回后执行以下代码
          if(re.status==0){
            self.autoReplyListData.remove(d);
          }else{
            alert(re.msg);
          }

        },'json');
      };

      this.onSubmit = function(d,e){
        //收集self.editingReply中的数据后发送ajax请求至后端，待数据返回后执行以下代码

        var $data=$('#replySet').serialize();
        $.post("<{u('updateRule')}>",$data,function(re){
          if(re.status==0){
            var vm = ko.dataFor($(".xy-nav")[0]);
            vm.setNavSelectedIndex(0);
          }else{
            layer.msg(re.msg);
          }


        },'json');

        //alert($('#replySet').serialize());

      };

      this.onCancel = function(d,e){
        xyUtils.changeViewStack(0);
      };
		};
		
		ko.components.register('xy-navigator', { require: 'components/xy-navigator' });
		ko.applyBindings(new viewModel());

    xyUtils.generateDateIntervalPicker('validFrom','validTo', 'yyyy-MM-dd HH:mm:ss');
    xyUtils.generateDateIntervalPicker('ticketValidFrom','ticketValidTo', 'yyyy-MM-dd HH:mm:ss');
	
	
	
	
	
	
	//上传代码

    $.fn.uploader = function () {
      return this.each(function () {
        var $this = $(this);
        var $img = $this.find('img');
        var $file = $this.find('input[type=file]');
        var $hidden = $this.find('input[type=hidden]');
        var $txt = $this.find('i.uptxt');
        // var $size = $this.find('span.size');
        /*$img.on('load', function () {
         var width = $(this).width();
         var height = $(this).height();
         $hidden.val($img.attr('src'));
         $size.text(width + 'x' + height);
         });*/
        $file.AjaxFileUpload({
          action: './api.php?m=Api&c=index&a=ajaxUpload',
          onSubmit: function () {
            $txt.text('上传中');
          },
          onComplete: function (filename, response) {
            if(parseInt(response.id)>0){
              $txt.text("上传成功");
              $hidden.attr('value', response.msg);
              $img.attr("src",'./'+response.msg);
            }else{
              $txt.text(response.msg);
            }

          }
        });
      });
    }


$('.uploader').uploader();
	});
});

</script>
</head>

<body>
<div class="xy-location">消息管理</div>
<div data-bind="component:{name:'xy-navigator', params:{data:['自动回复列表','新增自动回复'], onChange:onNavChange}}"></div>
<!-- 自动回复列表 -->
<div class="xy-nav-content current">
<table class="xy-table fixedTable borderedTable fullWidth">
  <thead>
  	<tr>
      <td>规则编号</td>
      <td>规则标题</td>
        <td>接收关键词</td>
        <td>回复类型</td>
        <td>回复标题</td>
        <td>回复正文</td>
        <td>跳转地址</td>
        <td>操作</td>
    </tr>
  </thead>
  <tbody data-bind="foreach:autoReplyListData">
    <tr>
      <td data-bind="text:$data.mID"></td>
      <td data-bind="text:$data.mTitle"></td>
      <td data-bind="text:$data.mKeyword"></td>
      <td data-bind="text:$data.mReplyType"></td>
      <td data-bind="text:$data.mReplyTitle"></td>
      <td data-bind="text:$data.mDes"></td>
      <td data-bind="text:$data.mLink"></td>
      <td>
         <div class="operateLinkContainer">
            <a data-bind="click:$parent.onEditBtnClick">修改</a>
            <a data-bind="click:$parent.onDeleteBtnClick">删除</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>

<!-- 编辑自动回复 -->
<div class="xy-nav-content">
<div class="xy-panel">
  <div class="xy-panelTop">
    <div class="xy-titlebar hAlignBalanceRow">
      <div class="xy-titlebar-left">回复信息</div>
    </div>
  </div>
  <form id="replySet">
  <div class="xy-panelContent">
    <form class="bottomMarginContainer current" id="textType">
      <div class="formRow">
        <input type="hidden" name="id" data-bind="value:editingReply.mID">
        <!--左区域-->
        <div class="formCol bottomMarginContainer">
          <!--接收类型-->
          <div class="formRow normalRow" >
            <div class="formCol">
              <span class="insertStarBefore">规则标题</span>
            </div>
            <div class="formCol">
              <input type="text" name="title" data-bind="textInput:editingReply.mTitle"/>
            </div>
          </div>

          <!--接收关键字-->
          <div class="formRow normalRow">
            <div class="formCol">
              <span class="insertStarBefore">接收关键字</span>
            </div>
            <div class="formCol">
              <input id="receiveKeyWord" name="keyWord" type="text" data-bind="textInput:editingReply.mKeyword"/>
            </div>
          </div>
          <!--有效期-->
          <div id="validDL" class="formRow normalRow validDL">
            <div class="formCol">
              <span>有效期</span>
            </div>
            <div class="formCol">
              <input id="validFrom" name="beginTime" class="selectIndicatorBG shorterInput" type="text" placeholder="选择开始时间" data-bind="textInput:editingReply.mValidFrom"/>
              至
              <input id="validTo" name="endTime" class="selectIndicatorBG shorterInput" type="text" placeholder="选择结束时间" data-bind="textInput:editingReply.mValidTo"/>
              <span class="grayText">（不选则默认开始，且一直有效）</span>
            </div>
          </div>
          <!--回复类型-->
          <div class="formRow normalRow">
            <div class="formCol">
              <span class="insertStarBefore">回复类型</span>
            </div>
            <div class="formCol">
              <select id="replyTypeInput1" name="replyType" data-bind="value:editingReply.mReplyType" >
                <option value="basic">文本消息</option>
                <option value="news">图文消息</option>
                <option value="card">卡券</option>
              </select>
            </div>
          </div>
          <!--回复标题-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='news'">
            <div class="formCol">
              <span class="insertStarBefore">回复标题</span>
            </div>
            <div class="formCol">
              <input type="text" name="replyTitle" data-bind="textInput:editingReply.mReplyTitle"/>
            </div>
          </div>
          <!--回复正文-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()!='news'">
            <div class="formCol">
              <div class="insertStarBefore">回复正文</div>
            </div>
            <div class="formCol">
              <textarea class="normalTextarea" name="replyContent"  data-bind="textInput:editingReply.mDes"></textarea>
            </div>
          </div>
          <!--跳转地址-->
          <div class="formRow normalRow">
            <div class="formCol">
              <span>跳转地址</span>
            </div>
            <div class="formCol">
              <input id="hrefInput3" type="text" name="URL" data-bind="textInput:editingReply.mLink"/>
            </div>
          </div>

          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='card'">
            <!--可接收次数-->
            <div class="formCol">
              <span class="insertStarBefore">可接收次数</span>
            </div>
            <div class="formCol">
              <input id="receiveCountInput3" name="quota" type="text" placeholder="不填表示不限次数" data-bind="textInput:editingReply.mReceiveCount"/>
            </div>
          </div>

          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='card'">
            <!--可领取用户-->
            <div class="formCol">
              <span class="insertStarBefore">可领取用户</span>
            </div>
            <div class="formCol">
              <div class="xy-radio">
                <input type="radio" id="ticketTarget1" name="ticketTargetOpts" value="0" data-bind="checked:editingReply.mTicketTarget">
                <label for="ticketTarget1" style="margin-right:20px">全部用户</label>
              </div>
              <div class="xy-radio">
                <input type="radio" id="ticketTarget2" name="ticketTargetOpts" value="1" data-bind="checked:editingReply.mTicketTarget">
                <label for="ticketTarget2">特定用户（手机号识别）</label>
              </div>
            </div>
          </div>
          <!--接受者绑定手机号-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mTicketTarget()==1">
            <div class="formCol">
              <div class="insertStarBefore">接受者绑定手机号</div>
              <div class="grayText">（多个以“,”分隔）</div>
            </div>
            <div class="formCol">
              <textarea class="normalTextarea" name="phone" data-bind="textInput:editingReply.mBindPhoneNum"></textarea>
            </div>
          </div>
          <!--卡券-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='card'">
            <div class="formCol">
              <span class="insertStarBefore">卡券</span>
            </div>
            <div class="formCol">
              <select id="ticketTypeInput3" name="cardType" style="width:175px" data-bind="value:editingReply.mTicket">
                <option value="" hidden disabled selected>请选择</option>
                <option value="1">卡券</option>
              </select>
              <input type="text" class="shorterInput" placeholder="筛选器"/>
            </div>
          </div>
          <!--卡券有效期-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='card'">
            <div class="formCol">
              <span class="insertStarBefore">卡券有效期</span>
            </div>
            <div class="formCol">
              <div style="margin-bottom:15px;">
                <div class="xy-radio">
                  <input type="radio" id="ticketValidType1" name="ticketValidTypeOpts" value="0" data-bind="checked:editingReply.mTicketValidType">
                  <label for="ticketValidType1" style="margin-right:10px">固定日期</label>
                </div>
                <input id="ticketValidFrom" class="selectIndicatorBG shorterInput" type="text" placeholder="选择开始时间" data-bind="textInput:editingReply.mTicketValidFrom"/>
                <span>至</span>
                <input id="ticketValidTo" class="selectIndicatorBG shorterInput" type="text" placeholder="选择结束时间" data-bind="textInput:editingReply.mTicketValidTo"/>
              </div>
              <div>
                <div class="xy-radio">
                  <input type="radio" id="ticketValidType2" name="ticketValidTypeOpts" value="1" data-bind="checked:editingReply.mTicketValidType">
                  <label for="ticketValidType2">领取后</label>
                </div>
                <select id="ticketValidFrom2" class="shorterInput" data-bind="value:editingReply.mTicketAvailableFrom">
                  <option value="0">当天</option>
                  <option value="1">明天</option>
                </select>
                <span>生效，有效天数</span>
                <select id="ticketValidTo2" class="shorterInput" data-bind="value:editingReply.mTicketAvailableTo">
                  <option value="30">30天</option>
                  <option value="31">31天</option>
                </select>
              </div>
            </div>
          </div>
          <!--库存-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mReplyType()=='card'">
            <div class="formCol">
              <span class="insertStarBefore">库存</span>
            </div>
            <div class="formCol">
              <input type="text" name="stock" placeholder="不填则默认为卡券库存数量" data-bind="textInput:editingReply.mTicketCount"/>
            </div>
          </div>
          <!--面向人群-->
          <div class="formRow normalRow" data-bind="visible:false">
            <div class="formCol">
              <span class="insertStarBefore">面向人群</span>
            </div>
            <div class="formCol">
              <div class="xy-radio">
                <input type="radio" id="QRCodeTarget1" name="QRCodeTargetOpts" value="0" data-bind="checked:editingReply.mQRCodeTarget">
                <label for="QRCodeTarget1" style="margin-right:20px">全部新关注用户</label>
              </div>
              <div class="xy-radio">
                <input type="radio" id="QRCodeTarget2" name="QRCodeTargetOpts" value="1" data-bind="checked:editingReply.mQRCodeTarget">
                <label for="QRCodeTarget2">特定二维码扫描关注用户</label>
              </div>
            </div>
          </div>
          <!--二维码字符串-->
          <div class="formRow normalRow" data-bind="visible:editingReply.mQRCodeTarget()==1">
            <div class="formCol">
              <span>二维码字符串</span>
            </div>
            <div class="formCol">
              <input id="QRCodeSource" type="text" data-bind="textInput:editingReply.mQRCodeSource" disabled/>
              <a class="xy-button">生成</a>
              <a class="xy-button">复制</a>
            </div>
          </div>
        </div>
        <!--右区域-->
        <div class="formCol bottomMarginContainer" data-bind="visible:editingReply.mReplyType()=='news'">
          <div class="formRow normalRow">
            <div class="formCol">
              <span>回复图片</span>
            </div>
            <div class="formCol uploader">
              <div style="width:268px;height:268px;position:relative;" class="grayBG">
                <input type="hidden" value="" name="replyImg">
              	<img id="selectedImg" class="abosuluteCenter" style="max-width:100%;max-height:100%" data-bind="attr:{src:editingReply.mReplyImg}"/>
                <a class="xy-button widerBtn xy-fileSelectBtn abosuluteCenter" style="">选取图片
                	<input type="file" name="file" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="hAlignCenterDiv fullWidth">
      <a class="xy-button widerBtn" data-bind="click:onSubmit">提交</a>
      <a class="xy-button widerBtn" data-bind="click:onCancel,visible:editingReply.cancelable">取消</a>
    </div>
  </div>
  </form>
</div>
</div>

</body>
</html>
